<template>
  <div class="index">
    <!-- <Header v-model="username"></Header> -->
    <a-layout id="components-layout-demo-custom-trigger">
      <!-- 左侧导航栏 -->
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <img
            v-if="!collapsed"
            width="200"
            src="../../assets/img/title.png"
            alt=""
          />
          <img v-else width="40" src="../../assets/img/title_logo.png" alt="" />
        </div>
        <a-menu
          theme="dark"
          mode="inline"
          v-model="selectedKey"
          @click="setSelectedKey"
        >
          <a-menu-item key="survey">
            <a-icon type="pie-chart" />
            <span>门锁概况</span>
            <!-- 传递参数 -->
            <router-link
              :to="{
                name: 'survey',
                params: {
                  username,
                },
              }"
            ></router-link>
          </a-menu-item>
          <a-menu-item key="management">
            <a-icon type="tool" />
            <span>门锁管理</span>
            <router-link
              :to="{
                name: 'management',
                params: {
                  username,
                },
              }"
            ></router-link>
          </a-menu-item>
          <a-menu-item key="logger">
            <a-icon type="file-search" />
            <span>日志管理</span>
            <router-link
              :to="{
                name: 'logger',
                params: {
                  username,
                },
              }"
            ></router-link>
          </a-menu-item>

          <a-sub-menu key="root">
            <span slot="title"
              ><a-icon type="robot" /><span>超管权限</span></span
            >
            <a-menu-item key="lockManage">
              门锁管理(root)
              <router-link
                :to="{
                  name: 'lockManage',
                  params: {
                    username,
                  },
                }"
              ></router-link>
            </a-menu-item>

            <a-menu-item key="tcpLogger">
              TCP日志查询
              <router-link
                :to="{
                  name: 'tcpLogger',
                  params: {
                    username,
                  },
                }"
              ></router-link>
            </a-menu-item>
            <a-menu-item key="lockNumber">
              用户卡号管理
              <router-link
                :to="{
                  name: 'lockNumber',
                }"
              ></router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item key="7">
            <a-icon type="file-search" />
            <span>测试页面</span>
            <router-link
              :to="{
                name: 'test',
                params: {
                  username,
                },
              }"
            ></router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <!-- 右侧顶部 -->
        <a-layout-header class="index-layout-header">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />

          <div>
            <a @click="userInfo">个人中心</a>
            <a >帮助中心</a>
            <a @click="logout">退出登录</a>
          </div>
        </a-layout-header>
        <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '706px',
          }"
        >
          <!-- 渲染的数据视图 -->
          <router-view v-if="isActive"></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <Footer></Footer>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isActive: true,
      username: "",
      collapsed: true,
      currentRoute: "",
      selectedKey: ["0"],
    };
  },
  components: {},
  beforeMount() {
    // 如果是被使用过的账号，则获取
    if (this.$_cookie.getCookie("selectedKey")) {
      this.selectedKey = [this.$_cookie.getCookie("selectedKey")];
    }
  },
  mounted() {
    // 获取用户名称
    this.username = this.$_cookie.getCookie("user");
    this.checkLogined();
  },
  methods: {
    async checkLogined() {
      const res = await this.$_api.getUserInfo();
      if (res.data.code === 401) {
        this.$message.info("身份认证过期，请重新登录！");
        this.$router.push("/login");
      }
    },
    reload() {
      this.isActive = false;
      this.$nextTick(() => {
        this.isActive = true;
      });
    },

    // TODO:乱七八糟的方法，建议重写：解决侧边栏刷新的问题
    setSelectedKey() {
      setTimeout(() => {
        this.$_cookie.setCookie("selectedKey", this.selectedKey, 1);
      }, 500);
      let data = this.$_cookie.getCookie("selectedKey");
    },

    async logout() {
      // 清除cookie，删除登录态
      this.$_cookie.delCookie('user');
      this.$_cookie.delCookie('selectedKey');
      const res = await this.$_api.logOut();
      const msg = res.data.message;
      switch(msg){
        case '成功':
          this.$message.success("成功退出登录！");
          this.$router.push("/Login");
          localStorage.removeItem("accessToken")
          break;
        default:
          this.$message.error("退出登录失败，请重试！");
      }
    },
    userInfo(){
      this.$router.push('/userInfo');
    },
  },
};
</script>
<style lang="less" scope>
.index {
  &-layout {
    &-header {
      position: sticky;
      top: 0;
      background: white;
      padding: 0 10px 0 0;
      display: flex;
      justify-content: space-between;
      
      a{
        color: black;
        margin-right: 10px;
        text-decoration: none;
        &:hover{
          text-decoration: underline;
        }
      }
    }
  }
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 60px;
  margin: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
